<template>
    <div className="user_box">
        <Card>
            <p slot="title">投诉管理</p>
            <Table :data="list" :columns="columns" />
            <Page :current="page" :style="pageStyle" @on-change="changePage" :page-size="10" :total="total"></Page>
        </Card>
        <Modal
            :closable="true"
            title="添加备注"
            width="400"
            @on-ok="setRemark" 
            v-model="showModal"    
            :mask-closable="false">
                <Input v-model="currentRemark" placeholder="请输入备注" style="width: 300px" />
        </Modal>
    </div>
</template>

<script>

export default {
  name: 'report_manage',
  data () {
    return {
        currentRemark:"",
        currentData:{},
        showModal: false,
        total: 0,
        page: 1,
        list: [],
        currentImage: "",
        columns: [{
            title: '投诉人',
            width: 150,
            align: 'center',
            render: (h, params) => {
                let {report_user_real_name } = params.row;
                return h('div', params.row.report_user_phone + (report_user_real_name ? ` (${ report_user_real_name }) ` : ""))
            }
        },{
            title: '被投诉人',
            width: 150,
            align: 'center',
            render: (h, params) => {
                let { reported_user_real_name } = params.row;
                return h('div', params.row.reported_user_phone + (reported_user_real_name ? ` (${ reported_user_real_name }) ` : ""))
            }
        },{
            title: '投诉内容',
            width: 200,
            align: 'center',
            render: (h, params) => {
                return h('div', params.row.message);
            }
        },{
            title: '备注',
            width: 200,
            align: 'center',
            render: (h, params) => {
                return h('div', params.row.remark)
            }
        },{
            title: '投诉时间',
            width: 200,
            align: 'center',
            render: (h, params) => {
                let date = new Date(params.row.create_date);
                let strDate = [date.getFullYear(),date.getMonth()+1 < 10 ? "0".concat(date.getMonth()+1):date.getMonth()+1,date.getDate()+1<10 ? "0".concat(date.getDate()+1) : date.getDate()+1 ].join("-");
                return h('div', strDate)
            }
        },{
            title: '操作',
            key: 'view',
            width: 130,
            fixed: 'right',
            align: 'center',
            render: (h, params) =>{
                let bar = [];
                bar.push(h('Button',{
                    props: {
                        type: 'primary',
                        size: 'small'
                    },
                    style: {
                        marginRight: "10px"
                    },
                    on: {
                        click: () => {
                            this.showModal = true;
                            this.currentData = params.row;
                        }
                    }
                }, "添加备注"));
                return h('div', bar);
            }
        }],
        pageStyle: {
            marginTop: '15px'
        }
    }
  },
  methods: {
    changePage(page) {
      this.jsonrpc.blind.admin.getReports({ start: (page - 1) * 10, limit: 10 }).then(res=> {
            this.list = res.list;
            this.total = res.total;
            this.page = page;
      })
    },
    setRemark() {
        this.jsonrpc.blind.admin.setRemark(this.currentData.id,this.currentRemark).then(res=> {
            this.changePage(this.page)
        })
    }
  },
  mounted() {
    this.changePage(1)
  }
}
</script>
<style>
    .show_view_modal .ivu-modal-footer{
        display: none;
    }
</style>